<html>
<head>
	<title>Kanban</title>
	<link href="css/style.css" rel="stylesheet" type="text/css" />	
	<link href="jquery-ui/css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript">
		$(function() {			
			$('.sortable').sortable({
				connectWith: '.sortable',
				cursor: 'move',
				opacity: 0.4,
				stop: updated,
			}).disableSelection();
			
			$('.task').dblclick(function(){
				$("#divForm").dialog({
					title: "View Task"
				});
				
				$('#divForm').load('task/form.php', { id: $(this).attr('id')}, 
					function(response, status, xhr) {
						if (status != "error") {
                            $("#divForm").dialog("open");
                        }
					}
				);
			});
			
			$("#divForm").dialog({
                autoOpen: false,
                modal: true,
				width: 430,
                close: function(event, ui) {
                    $(this).html("");
                }
            });

			$('#addTask').click(function(){
				$("#divForm").dialog({
					title: "Add Task"
				});
				
				$('#divForm').load('task/form.php', { history: $(this).attr('history')}, 
					function(response, status, xhr) {
						if (status != "error") {
                            $("#divForm").dialog("open");
                        }
					}
				);
			
				// $('#column1').append('<div id="10" class="task draggable"><p>Task #10</p><div class="taskFooter"><div class="taskBegin">21/11</div><div class="taskEnd">22/11</div><div class="taskResponsible">LDA</div></div></div>');
				
				return false;
			});
		});
		
		function updated(event, ui){
			var param = "task=" + $(ui.item).attr('id');
			param += "&board="  + $(ui.item)[0].parentElement.id;
						
			$.ajax({
				url: "foo.php",
				data: param,
				success: function(data){
					
				}
			});
		}
	</script>
</head>
<body>
	<div id="extension">
		<div id="divForm"></div>
	</div>
	<div id="header">
		
	</div>
	<div id="content">	
		<table id="tasks">
			<tr>
				<th>ToDo</th>
				<th>Doing</th>
				<th>Done</th>
			</tr>
			<tr>
				<td>
					<div style="float:left;">History #1</div>
					<div style="float:right;">
						<a id="addTask" href="#" history="1">Add Task</a>
					</div>
				</td>
				<td colspan="2"/>
			</tr>
			<tr>				
				<td>
					<div id="column1" class="droppable sortable">
						<div id="2" class="task draggable">
							<p>Task #2</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>
						<div id="4" class="task draggable">
							<p>Task #4</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>
						<div class="task draggable">
							<p>Task #5</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>
						<div class="task draggable">
							<p>Task #6</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>			
						<div class="task draggable">
							<p>Task #7</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>		
						<div class="task draggable">
							<p>Task #8</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>
						<div class="task draggable">
							<p>Task #9</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>						
					</div>							
				</td>
				<td>
					<div id="column2" class="droppable sortable">
						<div class="task draggable">
							<p>Task #3</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>						
					</div>
				</td>
				<td>
					<div id="column3" class="droppable sortable">						
						<div class="task draggable">
							<p>Task #1</p>
							<div class="taskFooter">
								<div class="taskBegin">21/11</div>
								<div class="taskEnd">22/11</div>
								<div class="taskResponsible">LDA</div>
							</div>
						</div>
					</div>
				</td>
			</tr>	
			<tr>
				<td colspan="3">
					History #2
				</td>
			</tr>
			<tr>
				<td>	
					<div id="column1" class="droppable sortable">
					
					</div>
				</td>
				<td>	
					<div id="column2" class="droppable sortable">
					
					</div>
				</td>
				<td>	
					<div id="column3" class="droppable sortable">
					
					</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="footer">
	
	</div>
</body>
<html>
